// import * as Vue from "vue";
import { computed, defineComponent, PropType, ref, watch } from "vue";
// import { anchorscroll } from "./anchorscroll";
import { useinnerhehight } from "./useinnerhehight";
import { useinnerwidth } from "./useinnerwidth";
import { useobservesize } from "./useobservesize";

export default defineComponent({
    props: {
        html: { type: String, required: false },
        top: { type: Number, required: true },
        innerref: {
            type: Function as PropType<(a: HTMLElement | undefined) => void>,
            required: true,
        },
    },
    setup(props) {
        const { width: rightbarwidth, ref: rightbarref } = useobservesize({});
        const innerwidth = useinnerwidth();
        const sidebarright = ref<HTMLElement>();
        watch(
            () => sidebarright.value,
            (v) => {
                if (v) {
                    props.innerref(v);
                    rightbarref(v);
                }
            }
        );
        const innerheight = useinnerhehight();

        const maxheight = computed(() => {
            return String(innerheight.value - props.top) + "px";
        });

        const left = computed(() => {
            return innerwidth.value - rightbarwidth.value;
        });

        // watch(
        //     () => props.html,
        //     (html) => {
        //         if (!html) {
        //             return;
        //         }
        //         Vue.nextTick(() => {
        //             requestAnimationFrame(() => {
        //                 if (!sidebarright.value) {
        //                     return;
        //                 }
        //                 const eles = Array.from(
        //                     sidebarright.value.getElementsByClassName(
        //                         "sidebar-sub-header"
        //                     )
        //                 ) as HTMLElement[];
        //                 eles.forEach((e) => {
        //                     e.onclick = onclick;
        //                 });
        //             });
        //         });
        //     }
        // );
        return { maxheight, sidebarright, left };
    },
    // mounted() {
    //     console.log(this);
    // },
});
// function onclick() {
//     //@ts-ignore
//     requestIdleCallback(() => {
//         requestAnimationFrame(() => {
//             anchorscroll();
//         });
//     });
// }
